<template>
  <v-container>
    <div id="player" style="text-align: left" />
  </v-container>
</template>

<script>
import 'aplayer/dist/APlayer.min.css'
import Aplayer from 'aplayer'
import { getMusicList } from '@/api/music'
import ColorThief from '@/assets/js/plugins/color-thief/color-thief'

export default {
  name: 'aplayer',
  data: () => ({
    musitList: []
  }),
  mounted() {
    this.getMusicList()
  },
  methods: {
    initPlayer() {
      const ap = new Aplayer({
        container: document.getElementById('player'),
        listFolded: true,
        listMaxHeight: 5,
        preload: 'auto',
        autoplay: false,
        fixed: true, // 吸底模式
        // mini: true,//迷你模式
        lrcType: 3,
        audio: this.musitList
      })
      // 颜色自取
      const colorThief = new ColorThief()
      const setTheme = (index) => {
        // 歌曲无主题
        if (!ap.list.audios[index].theme) {
          colorThief.getColorAsync(ap.list.audios[index].cover, function() {
            ap.theme('rgb(${color[0]},${color[1]},${color[2]})', index)
          })
        }
      }
      setTheme(ap.list.index)
      ap.on('listswitch', (index) => {
        setTheme(index.index)
      })
    },
    // 获取音乐列表
    getMusicList() {
      const param = {
        createBy: 2
      }
      getMusicList(param).then(res => {
        const result = res.data
        if (res && res.code === 200) {
          this.musitList.push(...result)
          this.initPlayer()
        }
      }).catch(function(e) {
        // console.log('加载音乐列表失败', e)
      })
    }
  }
}
</script>

<style scoped>

</style>
